<template>
	<div>
		<el-card>
			<div slot="header" class="clearfix">
				<span>基础数据</span>
			</div>
			<div class="container">
				<div class="up">
					<div class="title">数据上传</div>
					<div class="btn">
						<el-button icon="el-icon-download" @click="exportTemplate">模板下载</el-button>
						<el-upload class="upload-file" action="/api/upload" :limit="1" :file-list="fileList" :before-upload="beforeUpload" :on-success="handleFileSuccess" :on-remove="handleRemove" multiple :on-exceed="handleExceed" :auto-upload="true">
							<el-button type="primary" icon="el-icon-upload2">文件上传</el-button>
						</el-upload>
					</div>
				</div>
				<div class="down">
					<div class="title">请求参数</div>
					<div class="param">
						<el-input v-model="requestParam" type="textarea" :rows="2" placeholder="请输入内容" autosize />
						<el-button type="text" @click="formatParam">格式化</el-button>
					</div>
				</div>
				<el-button type="primary" style="margin-bottom: 10px; float: right" icon="el-icon-sheet" @click="send">开始校验</el-button>
			</div>
		</el-card>
		<el-card style="margin-top: 10px">
			<div slot="header" class="clearfix">
				<span>校验结果</span>
			</div>
			<div>
				<el-tabs type="border-card">
					<el-tab-pane label="预处理分析表">预处理分析表</el-tab-pane>
					<el-tab-pane label="预测结果表">预测结果表</el-tab-pane>
					<el-tab-pane label="大单处理表">大单处理表</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
	</div>
</template>

<script>
import API from "@/api";
// import { formatJson } from "@/utils/format";
export default {
	data() {
		return {
			fileList: [],
			requestParam: ""
		};
	},
	methods: {
		exportTemplate() {
			API.getTemplate().then(() => {});
		},
		beforeUpload(file) {
			const fileType = ["xlsx"];
			const isTrue = fileType.some(type => file.name.split(".")[1] === type);
			if (!isTrue) {
				this.$message.warning("上传文件仅支持 xlsx 格式！");
				return false;
			}
			return true;
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 1 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		handleFileSuccess(response, file, fileList) {
			// 上传成功则修改列表
			this.fileList = fileList;
			this.$message.success(response.data.status);
		},
		handleRemove(file, fileList) {
			// 文件列表中移除操作删除的文件
			this.fileList = fileList.filter(item => item.name !== file.name);
		},
		// JSON格式化
		formatParam() {
			// this.requestParam = formatJson(this.requestParam);
		},
		send() {
			API.compareForeacast();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .el-button {
	font-size: 12px !important;
}
.container {
	width: 90%;
	margin: 0 auto;

	.title {
		font-size: 14px;
		font-weight: 600;
		color: #909399;
	}

	.up {
		height: 80px;

		.upload-file {
			display: inline-block;
			margin-left: 20px;
			vertical-align: top;
		}
	}

	.btn,
	.param {
		margin-left: 5%;
	}
}
</style>
